<template>
	<div class="quickpay">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>账户充值</span>
			<span class="img"></span>
		</div>	
		<div class="inner"  style="border: none;">
			<span>账户余额</span>
			<p><span>{{money}}</span>元</p>
		</div>
		<p>
			<img src="../../assets/recharge_pic_kuaijie.png"/>
			无需开通网银，有银行卡就能支付
		</p>
		<div class="inner" style="border: none;" >
			<span>充值金额</span>
			<input type="tel" placeholder="最低100起充" v-model="amount"   />
		</div>
		<div class="inner" style="margin-top: 0.2667rem;" >
			<span>开户姓名</span>
			<input type="text" placeholder="输入开户姓名"  v-model="accountName" />
		</div>
		<div class="inner" >
			<span>身份证号</span>
			<input type="text" placeholder="身份证号"  maxlength="18" v-model="idCardNo"  />
		</div>
		
		<div class="inner"  >
			<span>银行卡号</span>
			<input id="trigger2" style="flex: 1;" v-model="bankNo" placeholder="请输入银行卡号" >
			<img :src="imgurl" id="trigger"/>
		</div>
		<p style="padding-right: 0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;">注：单卡单笔限额5000，单日限额：50000元，单月限额：200000</p>
		<v-button buttonText='提交' :isActive='isActive' topNum='0.8rem' @toNext='login'></v-button>
		<form action="" method="post" id="frm1"  style="display: none;" >
		    <input type="hidden" id="req_data" name="req_data" value=''/>
		</form>
	</div>
</template>

<script>
	import my from '@/api/my/index'
	import { toast,Money,isRealName,isIdCard,isBankNumber } from '@/util/index'
	import Button from '@/components/Button'
	import '../../util/mobileSelect.js';
	export default{
		data(){
			return{
				bankList:[],
				selectedbank:"",
				amount:"",
				accountName:"",
				bankNo:"",
				idCardNo:"",
				phone:"",
				money:"",
				bankCodelist:[],
				bankCode:"",
				flag:true,
				imgurl:require("../../assets/arrow_right.png"),
				
			}
		},
		
		
		methods:{
			back(){
			    this.$router.back(-1);
			},
			
			Transfer(data){
				  	var action = data.wwap_url;
					$("form").attr("action",action);
					$("#req_data").val(data.value);
					$("form").submit();
			},
			login(){
				
				/*if(this.amount<100 || this.amount>50000 ){
					toast("最低100起充，最高充值50000");
					this.amount="";
					return 
				}*/
		   		let senddata = {
					userId:window.localStorage.getItem("token"),
					acct_name:this.accountName,
					id_no:this.idCardNo,
					card_no:this.bankNo,
					amount:this.amount,
					plat:"mlj"
				}
				if(this.isActive) {
					my.doRecharge(senddata).then((res) => {
						if (res.data.code == 200) {
							this.Transfer(res.data.data);
						} else {
							toast(res.data.message)
						}
					})
				}
			},
			
			initMess(){
				let senddata = {
					userId:window.localStorage.getItem("token"),
					plat:"mlj"
				}
				my.bankJson(senddata).then((res) => {
					if (res.data.code == 200) {
						this.each(res.data.data);
					} else if(res.data.code == 103){
						this.$router.push({path:'/realnameInfo'})
					}else if(res.data.code==222){
			            this.$router.push({path:'/login'})
			        } else {
						toast(res.data.message)
						
					}
				})
			},
			each(val){
				
				for (var i = 0; i < val.length; i++){
				   this.bankCodelist.push(val[i])
				   this.bankList.push(val[i].bankName)
				}
				this.initBank();
				//this.$store.dispatch('saveBankList',this.bankList);
			},
			initBank(){
//				/console.log(this.bankList);
				var that = this;
				 var mobileSelect = new MobileSelect({
			          trigger: "#trigger",
			          title: "选择开户行",
			          wheels: [
			            {data: this.bankList}
			          ],
			          callback: function (indexArr, data) {
			            
			            that.bankNo = that.bankCodelist[indexArr].bankNo;
			          }
			        });

			},
		},
		computed: {
			isActive(){
				if (this.amount&&isRealName(this.accountName)&&isIdCard(this.idCardNo)&&isBankNumber(this.bankNo)) {
					return true
				} else {
					return false
				}
			},
			getUserData() {
			    return this.money=	this.$store.state.money;
			}
		},
		mounted(){
			this.initMess();
		},
		
		watch: {
		  getUserData(val) {
		    this.money = val;
		  }
		},
		components: {
			'v-button': Button
		},
		beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		    next()
		}
		
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
@import '../../less/mobileSelect.css';
.quickpay{
	color:white;
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		img,.img{
			width: @p30;
			height: @p30;
		}
	}
	.inner{
		background: #141723;
		padding:0 @p30;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.17333rem;
		border-bottom: 1px solid #262934;
		img{
			width:@f28 ;
			height: @f28;
		}
		#trigger{
			font-size: 0.42667rem;
		}
		input{
			flex: 1;
			font-size: @f32;
			color: white;
		}
		input::-webkit-input-placeholder {
			/* WebKit browsers*/
			color: #40495f;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 4 to 18*/
			color: #40495f;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 19+*/
			color: #40495f;
		}
		input:-ms-input-placeholder {
			/* Internet Explorer 10+*/
			color: #40495f;
		}
		select{  
			flex: 1;
			color: #40495f;
			font-size: @f32;
			height: 1.17333rem;
			background:url(../../assets/arrow_fold.png)no-repeat right center;
			border: none;
			-webkit-appearance: none;
			option{
				color: #40495f;
				font-size: @f32;
				height: .8rem;
				
			}
		}
		span{
		font-size:@f32;	
		margin-right: 1.06493rem;
		}
		p{
			font-size: @f32;
			padding:0px;
			
			span{
				margin-right: .3rem;
				color: #FF335B;
				font-weight: bold;
				
			}
		}
	}
	p{
		padding:0 @p30;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 1.17333rem;
		color: @Color;
		img{ 
			margin-right:  @p30;
			width: 1.76rem;
			height:0.64rem;
			display: block;
		
		}
	}
	.login{
		margin-top: 1.226666rem;
		width: 9.2rem;
		height: 1.17333rem;
		line-height: 1.17333rem;
		text-align: center;
		color: @Color;
		border: 2px @Color solid;
		margin: 0 auto;
		font-size: 0.48rem;
		border-radius: 0.08rem;
		
	}
}

</style>